<template>
	<view class="content">
		<text>扫码图片：</text>
		<view class="image">
			<image class="image-content" :src="base64Image"></image>
		</view>
		<text>扫码码值：</text>
		<view class="code">
			<text class="f-s-14">{{code}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import {onLoad,onUnload} from '@dcloudio/uni-app';
	import { initScanner, registerScanner, unregisterScanner, getCode, getImage, sendGetImage } from "@/uni_modules/hh-ubx-pda";

	const code = ref('');
	const base64Image = ref("");

	const init = () => {
		//初始化pda
		initScanner();
		//注册扫码监听
		registerScanner();
		uni.showToast({
			title: "初始化成功！",
			icon: "none",
			mask: false
		})
	}

	onLoad(() => {
		init();
		//获取扫码值
		getCode(_code => {
			code.value = _code;
			//发送获取图片的请求
			sendGetImage();
		});
		//获取扫码图片,图片为base64格式
		getImage(_img => {
			base64Image.value = _img;
		});
	});

	onUnload(() => {
		//移除扫码监听
		unregisterScanner();
		uni.showToast({
			title: "移除扫码监听！",
			icon: "none",
			mask: false
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
	}

	.image {
		width: 100%;
		height: 200px;
		border: 1px solid rgb(41, 78, 162);

		>.image-content {
			width: 100%;
			height: 100%;
		}
	}

	.code {
		width: 100%;
		height: 35px;
		border: 1px solid rgb(41, 78, 162);
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.action-btn-list {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		>.action-btn {
			width: 33.33%;
			padding: 20 15px;
			background-color: rgb(41, 78, 162);
			border-radius: 2px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1px solid #ccc;

			>.f-s-14,
			.f-s-12 {
				color: #fff;
			}

			&:hover {
				background-color: #fff;
			}
		}
	}
</style>